<template>
  <div class="block">
    <Title title="仪表盘" introduce="设备概览和传感数据可视化。" />
    <!-- 设备概览、监控、公告 -->
    <div class="device">
      <!-- 设备概览、监控 -->
      <Homedata class="de-left" />
      <!-- 公告 -->
      <Gonggao class="de-right" />
    </div>
    <Echarts />
  </div>
</template>

<script>
import Title from "@/components/Title.vue";
import Homedata from "@/components/dashboard/Homedata.vue";
import Gonggao from "@/components/dashboard/Gonggao.vue";
import Echarts from "@/components/dashboard/Echarts.vue";

export default {
  name: "dashboard",
  components: {
    Title,
    Gonggao,
    Homedata,
    Echarts,
  },
};
</script>

<style scoped lang="scss">
.el-card {
  /deep/ .el-card__header {
    padding: 10px 10px;
    border-bottom: 1px solid #ebeef5;
    box-sizing: border-box;
  }
}

.device {
  display: flex;
  justify-content: space-between;
  .de-left {
    width: 75%;
    margin-right: 10px;
    flex: 1;
  }
  .de-right {
    width: 20%;
  }
}
</style>
